// import Reducer from "./demo/Reducer";
import { useState, useTransition } from 'react'
import { Input, List, Typography } from 'antd'
interface Item {
  id: number
  name: string
  address: string
  email: string
  url: string
}
function Transition() {
  // fetch('/api/list?keyword=123').then(res=>res.json()).then(data=>{
  //   console.log(data);
  // })
  const [inputValue, setInputValue] = useState('')
  const [list, setList] = useState<Item[]>([])
  const [isPending, startTransition] = useTransition()
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
    fetch(`/api/list?keyword=${e.target.value}`)
      .then((res) => res.json())
      .then((data) => {
        const res = data?.list ?? []
        // 使用过渡 useTransition
        startTransition(() => {
          setList([...res])
        })
      })
  }
  return (
    <>
      <Input
        value={inputValue}
        placeholder="input search text"
        onChange={handleChange}
        style={{ width: 200 }}
      />
      {isPending && <div>loading...</div>}
      <List
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={list}
        renderItem={(item: Item) => (
          <List.Item>
            <Typography.Text mark>[ITEM]{item.name}</Typography.Text>
            {item.address}
          </List.Item>
        )}
      />
    </>
  )
}

export default Transition
